<template>
  <div class="app-container">
      <div class="filter-container">
          <el-input v-model="SearchForm.KeyWord" style="width:250px" placeholder="可用 用户名称/用户账号 查询" class="filter-item"></el-input>
           <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
          <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleAdd">添加</el-button>
      </div>
          <el-table
            :data="DataList"
            border
            fit
            highlight-current-row
            v-loading="listLoading"
            style="width: 100%">
            <el-table-column
              prop="Name"
              label="用户名称"
              align="center"
              width="300">
            </el-table-column>
            <el-table-column
              prop="Mobile"
              label="用户账号"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="RoleName"
              label="所属角色"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="CreateTimeStr"
               align="center"
              label="创建时间">
            </el-table-column>
           <el-table-column
              prop="Info"
               align="center"
              label="备注">
            </el-table-column>
             <el-table-column
                align="center"
             width="200"
              label="操作">
                 <template slot-scope="scope">
                   <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                   <el-button size="mini" type="danger" @click="handleDelete(scope.row)"> 删除</el-button>
                </template>
            </el-table-column>
          </el-table>
           <pagination v-show="TotalCount>0" :total="TotalCount" :page.sync="SearchForm.pageIndex" :limit.sync="SearchForm.pageSize" @pagination="getList" />

          <!-- 编辑新增弹出框 -->
          <el-dialog
              :title="form.Id==0?'新增用户':'编辑用户'"
              :visible.sync="AddOrEditdialogVisible"
              width="30%"
              @close="handleClose"
             >
              <div>
                <el-form ref="form" :model="form" :rules="rule" label-width="80px">
                  <el-form-item label="用户名称" prop="Name">
                    <el-input v-model="form.Name"></el-input>
                  </el-form-item>
                 <el-form-item label="用户账号" prop="Mobile" v-if="form.Id==0">
                    <el-input v-model="form.Mobile" placeholder="密码长度在 4 到 15 且是字母和数字组合"></el-input>
                  </el-form-item>
               <el-form-item label="选择角色" >
                    <el-select v-model="form.RoleID" placeholder="请选择">
                        <el-option
                            v-for="item in RoleList"
                            :key="item.ID"
                            :label="item.RoleName"
                            :value="item.ID">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户密码" prop="PassWord" v-if="form.Id==0">
                    <el-input v-model="form.PassWord" placeholder="密码长度在 6 到 15 个字符" type="password"></el-input>
                </el-form-item>
                <el-form-item label="重复密码"  prop="PassWordR" v-if="form.Id==0">
                    <el-input v-model="form.PassWordR" type="password"></el-input>
                </el-form-item>
                  <el-form-item label="备注" prop="Info">
                    <el-input v-model="form.Info"></el-input>
                </el-form-item>
                </el-form>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="AddOrEditdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
              </span>
          </el-dialog>
  </div>
</template>

<script>
Array.prototype.clone=function(){
    return [].concat(this);
    //或者 return this.concat();
}
import req from '@/utils/req'
import Pagination from '@/components/Pagination'
export default {
   components: { Pagination },
  data() {
    var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.PassWord) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      let validateMobile=(rule, value, callback) => {
        var reg = /^[a-zA-Z]([-_a-zA-Z0-9]{6,20})$/;
        if(value===''){
              callback(new Error('请输入账号'));
        }else if(/^[0-9]*$/.test(value.substr(0,1)) ){
             callback(new Error('首字母不能是数字'));
        }else if(/^[\u4e00-\u9fa5]+$/.test(value)){
              callback(new Error('帐号不能有汉字'));
        }else{
          callback();
        }
      };
    return {
        SearchForm:{
          KeyWord:' ',
          pageIndex:1,
          pageSize:20,
        },
        form:{
          Id:0,
          Name:'',
          Mobile:'',
          PassWord:'',
          PassWordR:'',
          RoleID:'',
          Info:''
        },
        TotalCount:0,
        DataList:[],
        RoleList:[],
        AddOrEditdialogVisible:false,//
        listLoading:false,
        //验证
        rule:{
          Name:[
             { required: true, message: '请输入用户名称', trigger: 'blur' },
          ],
          Mobile:[
             { required: true, message: '请输入用户帐号', trigger: 'blur' },
             { validator: validateMobile, trigger: 'blur' }
          ],
          PassWord:[
             { required: true, message: '请输入用户密码', trigger: 'blur' },
              { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ],
          PassWordR:[
             { required: true, message: '请再次输入用户密码', trigger: 'blur' },
             { validator: validatePass2, trigger: 'blur' }
          ],
        },
       //设置权限菜单的字段
      IsTreedialogVisible:false,

    }
  },
  watch: {

  },
  created() {
    this.getList();
    //获取角色列表
    req.get('sys/role/GetList',{}).then(res=>{
        this.RoleList=res.Data.roleList;
    });;
  },
  methods: {
    handleFilter(){
      this.SearchForm.pageIndex=1;
      this.getList();
    },
   formatterRoleStatus(row, column, cellValue, index){
      return cellValue==1?'启用 ':'禁用'
    },
   getList(){
     this.listLoading = true;
     req.get('sys/SysUser/pagelist',this.SearchForm).then(res=>{
       this.DataList=res.Data.List;
       this.TotalCount=res.Data.TotalCount
         setTimeout(() => {
          this.listLoading = false
        }, 500)
     });
   },
   //新增
   handleAdd(){
     this.AddOrEditdialogVisible=true;

   },
   handleUpdate(row){
     this.form=Object.assign({}, row) // copy obj;
     if( this.form.RoleID===0){
            this.form.RoleID='';
     }
     this.AddOrEditdialogVisible=true;

   },
   //关闭的回调
   handleClose(done){
     this.form.Name='';
     this.form.Mobile='';
     this.form.PassWord='';
     this.form.PassWordR='';
     this.form.RoleID='';
     this.form.Info='';
     this.form.Id=0;
     this.$refs['form'].resetFields();
   },
   handleSubmit(){
     var url=this.form.Id==0?'sys/SysUser/Add':'sys/SysUser/Edit';
         this.$refs['form'].validate((valid) => {
           if(valid){
            req.post(url,this.form).then(res=>{
                  if(res.StatusCode===200){
                      this.$notify.success({ title: '成功',message:'操作成功' });
                      this.AddOrEditdialogVisible=false;
                      this.getList();
                  }else{
                      this.$notify.error({ title: '失败',message:res.Data });
                  }
                });
           }
       })
   },
   //删除
   handleDelete(row){
       this.$confirm(`此操作将永久删除用户 , 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
                req.post('sys/SysUser/Delete',row).then(res=>{
                  if(res.StatusCode===200){
                      this.$notify.success({ title: '成功',message:  '删除成功'});
                        this.DataList= this.DataList.filter(el=>{return el.Id!=row.Id});
                  }
                });
        }).catch(() => {
        });
   },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-form .el-input{
    width:80%;
}
</style>
